<template>
  <div>
    <h1>{{count}}</h1>
    <button @click="changeCount">修改</button>
  </div>
</template>

<script lang="ts">
  import {defineComponent} from "vue"
  export default defineComponent({
    name:'Abort',
  })


</script>
<script setup lang="ts">
import {ref,watch} from "vue"
let person = ref({
    name: "老王",
    age: 18,
    score: {
      math: 100,
      en: 90,
    },
})
const changeCount = ()=>{
 person.value.score.math = 101;
}
//监听基本数据值，第一个参数是要监听的属性，第二个参数是一个回调函数，回调函数中第一个参数是当前的属性的值，第二个属性是上一次属性的值，第三个参数是一个配置对象，immediate或deep
watch(count,(newVal,oldVal)=>{
  console.log(newVal,'new')
  console.log(oldVal,'old')

},{
immediate:true
})


</script>